<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
        <title>Formulario de Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/stylelogin.css" />
		<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
    </head>
    <body>
        <div class="container">
            <!-- Codrops top bar -->
            <header>
                <h1>Formulario de Login</h1>

          </header>
            <section>				
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form  action="validarusuario.php" method="post" autocomplete="on"> 
                                <h1>Login</h1> 
                              	<h5 id="msj_error"><?php echo $_POST["msg_error"] ?></h5>
                                <br> 
                                <p> 
                                    <label for="username" class="uname" data-icon="u" >Nombre de Usuario *</label>
                                    <input id="username" name="username" required="required" type="text" placeholder="Usuario"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p">Contraseña *</label>
                                    <input id="password" name="password" required="required" type="password" placeholder="Contraseña" />
                                </p>
                               
                                 <p class="keeplogin"> 
									
									<a href="./recuperarpass.html">Olvide mi Contraseña</label>
								</p>
                                <p class="login button"> 
                                    <input type="submit" value="Enviar" />
								</p>
                                 <p class="change_link">
									No eres miembro?
									<a href="#toregister" class="to_register">Únetenos</a>
								</p>
                               
                                
                            </form>
                        </div>

                        <div id="register" class="animate form">
                        
                            <form  action="altausuario.php" autocomplete="on" method="post"> 
                                <h1> Registro de Usuario </h1>
                                <h3> Por favor complete el formulario de registración</h3>    <br>    <br>
								<p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Nombre de Usuario*</label>
                                    <input id="usernamesignup" name="username" required="required" type="text" placeholder="mi nombre de usuario" />
                                </p>
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Tú Nombre*</label>
                                    <input id="usernamesignup" name="name" required="required" type="text" placeholder="mi nombre" />
                                </p>
                                <p>
                                    <label for="usernamesignup" class="uname" data-icon="u">Tú Apellido*:</label>
                                    <input id="usernameapellido" name="lastname" required="required" type="text" placeholder="mi apellido" />
                                </p>
                                  	<br><label for="usernamesignup" class="uname" >Tipo de Documento:</label><br> <br>
  									<label> <input type="radio" name="doc" required value="dni" checkradio> DNI</label>
                                    <label> <input type="radio" name="doc" required value="le" checkradio> LE</label>
                                    <label> <input type="radio" name="doc" required value="lc" checkradio> LC</label>

                                 <br>    <br>
                                 <p>
                                    <label for="usernamesignup" class="uname" data-icon="" >DNI*:</label>
                                    <input id="usernameapellido" name="dni" required="required" type="text" placeholder="mi número de docuemnto" />
                                </p>
                                 <p>
                                    <label for="emailsignup" class="fecha" >Fecha de Nacimiento*:</label>
                                    <input id="fechanac" name="fechanac" required="required" type="date"/>
                                </p>
                                  <p>
                                    <label for="usernamesignup" class="uname" >Dirección:</label>
                                    <input id="usernameapellido" name="dir" required="required" type="text" placeholder="mi dirección" />
                                </p>
                                 
                                 <p>
                                    <label for="usernamesignup" class="uname" >Ciudad:</label>
                                    <input id="usernameapellido" name="ciudad" required="required" type="text" placeholder="mi ciudad" />
                                </p>
                                 <p>
                                    <label for="usernamesignup" class="uname" >Estado / Provincia / Región</label>
                                    <input id="usernameapellido" name="estado" required="required" type="text" placeholder="mi estado/ provincia/ región" />
                                </p>
                                <p>
                                    <label for="usernamesignup" class="uname" >Código Postal:</label>
                                    <input id="usernameapellido" name="codpos" required="required" type="text" placeholder="código postal" />
                                </p>
                                  <p>
                                  <br>
                                    <label for="usernamesignup" class="uname" >País:</label>
                                    <select class="form-control" name="pais">
                                    <option>Argentina</option>
                                    <option>Brasil</option>
                                    <option>Uruguay</option>
                                    <option>Paraguay</option>
                                    <option>EE UU</option>
                                    </select>
                                    <br>
                                    <br>
                                </p>
                                  <p>
                                    <label for="emailsignup" class="youmail" data-icon="e" >Tú Correo Electrónico:</label>
                                    <input id="emailsignup" name="email" required="required" type="email" placeholder="mysupermail@mail.com"/>
                                </p>
                                <p>
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Tú Contraseña:</label>
                                    <input id="passwordsignup" name="pass" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Por Favor Confirme Su Contraseña </label>
                                    <input id="passwordsignup_confirm" name="pass" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="keeplogin"> 
                                	<label for="checkbox" id="box" class="checkbox" ></h2>Activo</label><br>
                                    <input type="checkbox" name="activo" id="checkbox" placeholder="tu contraseña" checkradio  />
                               	 	<label for="loginkeeping">Usuario Habilitado</label>
								</p>
                                <p class="keeplogin">
                                	<label for="checkbox" id="box" class="checkbox">Recordar el cambio de contraseña</label> <br>
									<input type="checkbox" name="loginkeeping" placeholder="tu contraseña" id="box" checkradio  /> 
									<label for="loginkeeping">Se recomendará el cambio de contraseña</label>
								</p>
                                <p class="signin button"> 
									<input type="submit" value="Inscribete"/>
								</p>
                                <p class="change_link">  
									Ya eres miembro ?
									<a href="#tologin" class="to_register"> Inicie Sesión</a>
								</p>
                            </form>
                        </div>
						
                            
                            
                        
                    </div>
                </div>  
            </section>
        </div>
    </body>
</html>